<template>
<div class="container">
    <!-- 头部card -->

<!--    <el-row :gutter="20">
        <el-col :lg="6">
            <el-card class="card_item" shadow="hover">
                <div class="card_item_t">
                    <span>吞吐量</span>
                    <img src="../../assets/icon/main_icon_006.svg" alt="" @click="showReport(1)" />
                </div>
                <div class="card_item_m">
                    <div class="number_size">
                        <div class="number" v-if="actualtotal.length">{{actualtotal[0].weight}}</div>
                        <div class="unit">吨</div>
                    </div>
                    <div class="txt_number">
                        <div class="day_txt">
                            <span>日同比</span>
                            <span :class="sumtucompare.rateDay>0?'red':'green'">{{sumtucompare.rateDay}}%</span>
                            <i class="el-icon-caret-top red" v-if="sumtucompare.rateDay>0"></i>
                            <i class="el-icon-caret-bottom green" v-else></i>
                        </div>
                        <div class="week_txt">
                            <span>周同比</span>
                            <span :class="sumtucompare.rateWeek>0?'red':'green'">{{sumtucompare.rateWeek}}%</span>
                            <i class="el-icon-caret-top red" v-if="sumtucompare.rateWeek>0"></i>
                            <i class="el-icon-caret-bottom green" v-else></i>
                        </div>
                    </div>
                </div>
                <div class="card_item_b">
                    <div class="txt">年目标量</div>
                    <div class="num" v-if="plantotal.length">{{plantotal[0].sumVolume?plantotal[0].sumVolume/10000:0}}万吨</div>
                </div>
            </el-card>
        </el-col>
        <el-col :lg="6">
            <el-card class="card_item" shadow="hover">
                <div class="card_item_t">
                    <span>自然吨</span>
                    <img src="../../assets/icon/main_icon_006.svg" alt="" @click="showReport(2)" />
                </div>
                <div class="card_item_m">
                    <div class="number_size">
                        <div class="number" v-if="actualtotal.length">{{actualtotal[1].weight}}</div>
                        <div class="unit">吨</div>
                    </div>
                    <div class="">
                        <titleCharts :options="naturalOptions" />
                    </div>
                </div>
                <div class="card_item_b">
                    <div class="txt">年目标量</div>
                    <div class="num" v-if="plantotal.length">{{plantotal[3].sumVolume?plantotal[3].sumVolume/10000:0}}万吨</div>
                </div>
            </el-card>
        </el-col>
        <el-col :lg="6">
            <el-card class="card_item" shadow="hover">
                <div class="card_item_t">
                    <span>外贸量</span>
                    <img src="../../assets/icon/main_icon_006.svg" alt="" @click="showReport(3)" />
                </div>
                <div class="card_item_m">
                    <div class="number_size">
                        <div class="number" v-if="actualtotal.length">{{actualtotal[2].weight}}</div>
                        <div class="unit">吨</div>
                    </div>
                    <div class="txt_number" v-if="proDatafenmu !='' && proDatafenzi != ''">
                        <el-progress :stroke-width="9" :percentage="(proDatafenmu / proDatafenzi) * 100" :show-text="false"></el-progress>
                    </div>
                </div>
                <div class="card_item_b">
                    <div class="txt">年目标量</div>
                    <div class="num" v-if="plantotal.length">{{plantotal[1].sumVolume?plantotal[1].sumVolume/10000:0}}万吨</div>
                </div>
            </el-card>
        </el-col>
        <el-col :lg="6">
            <el-card class="card_item" shadow="hover">
                <div class="card_item_t">
                    <span>在线用户</span>
                    <img src="../../assets/icon/main_icon_001.svg" alt="" />
                </div>
                <div class="card_item_m">
                    <div class="number_size">
                        <div class="number">{{onlineUser.onlineCount}}</div>
                        <div class="unit">位</div>
                        <div class="txt" @click="openVisitNum">在线用户排行</div>
                    </div>
                    <div class="txt_number" style="padding:10px 0">
                        <el-tooltip class="item" :content="item.userName" placement="top" v-for="(item,index) in onlineUser.onlineUserDTOS" :key="index">
                            <img :src="item.avatar||defaultImg" alt="">
                        </el-tooltip>
                    </div>
                </div>
                <div class="card_item_b">
                    <div class="txt">总用户数</div>
                    <div class="num">{{onlineUser.userCount}}人</div>
                </div>
            </el-card>
        </el-col>
    </el-row>

    &lt;!&ndash; 中部 &ndash;&gt;
    <el-row style="margin-top:20px" >
        &lt;!&ndash; 海轮在港分布图 &ndash;&gt;
        <el-col :lg="3" v-for="(item,index) in serviceList" :key="index" @dblclick.native.stop="editFastEntry"  @click.native="goToserviceList(index)">
            <div class="service_item">
                <div class="service_icon">
                    <img :src="item.src" alt="" v-if="item.src" width="36">
                    <i v-else :class="item.icon" class="iconfont" :style="{fontSize:'36px',color:item.color}"></i>
                </div>
                <div class="service_name" v-if="item.text">{{item.text}}</div>
                <div class="service_name" style="color:#cbcfd5;" v-else>暂未配置</div>
            </div>
        </el-col>
        &lt;!&ndash; 快速入口 &ndash;&gt;
    </el-row>
    <fastEntry @init="init" :data="serviceList" :is-show="fastEntryIsShow" @visibleChange="visibleChangeB"></fastEntry>

    &lt;!&ndash; 尾部 &ndash;&gt;
    <el-row style="margin-top:20px;">
        <el-card class="throughput_item" shadow="hover">
            <el-row class="throughput_item_t">
                <el-col :lg="15">
                    <div class="title_l">
                        <i class="iconfont icon-tuntuliang-01" :style="{fontSize:'22px',color:'#CAE8FF',backgroundColor:'#3180FB',borderRadius:'50%'}"></i>
                        <span> 吞吐量</span>
                    </div>
                </el-col>
                <el-col :lg="9">
                    <div class="title_r">
                        <div :class="['item',itemIndex===index ? 'active' : '']" v-for="(item,index) in itemList" :key="index" @click="itemHandleClick(index)">{{item}}</div>
                        <el-date-picker size="mini" v-model="defaultDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleChange">
                        </el-date-picker>
                    </div>
                </el-col>
            </el-row>
            <el-row class="throughput_item_b">
                <el-col :lg="18">
                    <div class="title">
                        分公司吞吐量
                    </div>
                    <div style="padding-right:30px;width:100%">
                        <throughputCharts :options='throughputOptions' />
                    </div>

                </el-col>
                <el-col :lg="6">
                    <div class="title">
                        货物吞吐量排行
                    </div>
                    <ul>
                        <li v-for="(item,index) in sumtucargoList" :key="index">
                            <div class="txt" :class="[index<3?'active':'']">{{index+1}}</div>
                            <div class="txt">{{item.cargoName}}</div>
                            <div class="txt">{{item.weight}}</div>
                        </li>
                    </ul>
                </el-col>
            </el-row>

        </el-card>

    </el-row>
    <rankInfo :isShow="isShow" @visibleChange="visibleChange" />
    <notice v-if="noticeShow" :maskShowClick="maskShowClick"></notice>-->
</div>
</template>

<script>
// 导入echarts
import echarts from "echarts";
import titleCharts from "./titleCharts"
import throughputCharts from "./throughputCharts"
import rankInfo from "./rankInfo"
import fastEntry from "./fastEntry"
import notice from '../../pages/HomePage/components/notice'
export default {
    data() {
        return {
            fastEntryIsShow:false,
            timer:null,
            noticeShow:false,
            proDatafenmu:'',
            proDatafenzi:'',
            isShow: false,
            defaultImg: require('@/assets/icon/morentouxiang.svg'),
            actualtotal: [],
            sumtucargoList: [],
            plantotal: [],
            onlineUser: {},
            sumtucompare: {
                rateDay: 0,
                rateWeek: 0
            },
            itemList:['今日','月度','全年'],
            itemIndex:1,
            defaultDate: [],
            naturalOptions: {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    confine:true,
                    formatter: '{b}: {c}吨'
                },
                grid: {
                    top: 20,
                    bottom: 0,
                    left: 20,
                    right:20
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false,
                    },
                    data: [],
                    boundaryGap: false,
                    axisLabel: {
                        color: '#fff'
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(12,102,173,.5)',
                            width: 1,
                        }
                    },
                    show: false
                },
                yAxis: {
                    show: false,
                },
                series: [{
                    data: [],
                    type: 'line',
                    symbol: 'circle',
                    symbolSize: 5,
                    smooth: true,
                    smoothMonotone: 'x',
                    itemStyle: {
                        normal: {
                            color: '#82D99D',
                        },
                    },
                    label: {
                        show: true,
                        color: '#606266',
                        formatter: function (param) {
                            if (param.dataIndex != 3) {
                                return '' + param.name.substring(0, 2);
                            } else {
                                return '' + param.name
                            }
                        },
                        fontSize: 10,
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#82D99D'
                            }, {
                                offset: 1,
                                color: '#DCF9E0'
                            }])
                        }
                    },
                }]
            },
            serviceList:[
                {
                    icon: 'icon-tubiao-01',
                    text: '',
                    color: '#F75E5E',
                    radio:1
                },
                {
                    icon: 'icon-tongyongtubiao1',
                    text: '',
                    radio: 2,
                    color: '#5a59a6'

                },
                {
                    icon: 'icon-zongheguanli',
                    text: '',
                    color: '#edb01b',
                },
                {
                    icon: 'icon-tongyongtubiao2',
                    text: '',
                    color: '#45b6e4'
                },
                {
                    icon: 'icon-danzhengzhongxin',
                    text: '',
                    color: '#80DA22'
                },
                {
                    icon: 'icon-zuoye',
                    text: '',
                    color: '#F7B500'
                },
                {
                    icon: 'icon-kuchangguanli',
                    text: '',
                    color: '#F75E5E'
                },
                {
                    icon: 'icon-shangcaiyitihua',
                    text: '',
                    color: '#45b6e4'
                }
            ],
            throughputOptions: {
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    confine: true,
                    formatter: function (params) {
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + "(万吨)";
                        }
                        return relVal;
                    }
                },
                title: {
                    top: 0,
                    left: 0,
                    subtext: '单位：万吨',
                    subtextStyle: {
                        color: '#6D6D6D'
                    }
                },
                grid: {
                    top: 40,
                    bottom: 60,
                    left: '5.5%',
                    right: 20
                },
                color: ['#FE5578', '#FEBE55', '#59BCFB','#48D8BF'],
                // color: ['#59BCFB', '#FEBE55', '#FE5578'],
                legend: {
                    orient: 'horizontal',
                    icon: 'circle',
                    itemWidth: 8,
                    itemHeight: 8,
                    top: 0,
                    right: 15,
                    data: [],
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#FCE6BC',
                            type: 'solid'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        margin: 20,
                        color: "#404040",
                        rotate: 30
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: "dotted",
                            opacity: 0.61,
                            color: '#8CA0B3'
                        },
                        show: true, //隐藏或显示
                    },
                    boundaryGap: false,
                    data: [],
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            opacity: 0.61,
                            color: '#B0BEC5',
                            type: "solid"
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: "#404040"
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: "dashed",
                            opacity: 0.76,
                            color: '#8CA0B3'
                            //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: true, //隐藏或显示
                    },
                },

                series: [{
                        name: "大港",
                        data: [],
                        type: "line",
                        symbol: 'none',
                         lineStyle: {
                            color: '#FE5578 '
                        },
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: "#FE5578",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "#FCE6BC",
                                        },
                                    ],
                                    false
                                ),
                                // shadowColor: "rgba(0, 0, 0, 0.1)",
                                // shadowBlur: 10,
                            },
                        },

                    },
                    {
                        name: "金港",
                        data: [],
                        type: "line",
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            color: '#FEBE55'
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: "#FEBE55",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "#FCE6BC",
                                        },
                                    ],
                                    false
                                ),
                                // shadowColor: "rgba(0, 0, 0, 0.1)",
                                // shadowBlur: 100,
                            },
                        },
                    },
                    {
                        name: "东港",
                        data: [],
                        type: "line",
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            color: '#59BCFB'
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: "#59BCFB",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "#FCE6BC",
                                        },
                                    ],
                                    false
                                ),
                                // shadowColor: "rgba(0, 0, 0, 0.1)",
                                // shadowBlur: 100,
                            },
                        },
                    },
                    {
                        name: "高新港务",
                        data: [],
                        type: "line",
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            color: '#48D8BF'
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: "#48D8BF",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "#FCE6BC",
                                        },
                                    ],
                                    false
                                ),
                                // shadowColor: "rgba(0, 0, 0, 0.1)",
                                // shadowBlur: 100,
                            },
                        },
                    },
                ],
            },

        }
    },
    filters: {
        NumFormat: function (value) {
            if (!value) return '0.00'
            var arr = value.split('.')
            return arr[0].replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + (arr.length > 1 ? '.' + arr[1] : '')
        }
    },
    components: {
        titleCharts,
        throughputCharts,
        rankInfo,
        notice,
        fastEntry
    },
    created() {
        //获取当前时间
        let myDate = new Date();
        let dateY = myDate.getFullYear();
        let dateM = myDate.getMonth()+1;
        let dateD = myDate.getDate();
        let endDate = dateY+"-"+(dateM<10 ? "0" + dateM : dateM)+"-"+(dateD<10 ? "0"+ dateD : dateD);//当前时间
        //获取三十天前日期
        let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
        let lastY = lw.getFullYear();
        let lastM = lw.getMonth()+1;
        let lastD = lw.getDate();
        let startDate = lastY+"-"+(lastM<10 ? "0" + lastM : lastM)+"-"+(lastD<10 ? "0"+ lastD : lastD);//三十天之前日期
        this.defaultDate = [startDate,endDate]
        // this.getData()
        // this.getserviceListData()
    },
    mounted() {
        if (this.$route.meta.title == '主页') {
            window.open("http://192.168.75.133:9290/")
        }
    },
    methods: {

        maskShowClick(){
            this.noticeShow = false
        },
        visibleChange() {
            this.isShow = false
        },
        getData() {
            this.getplanSum()
            this.getactualSum()
            this.getSumcomp()
            this.getSumtucargo()
            this.getSumtucompare()
            this.getTuchildcomp()
            this.getOnlineUser()
        },
        // 吞吐量-时间纬度切换
        itemHandleClick(index) {
            this.itemIndex = index
            //获取当前时间
            let myDate = new Date();
            let dateY = myDate.getFullYear();
            let dateM = myDate.getMonth()+1;
            let dateD = myDate.getDate();
            let endDate = dateY+"-"+(dateM<10 ? "0" + dateM : dateM)+"-"+(dateD<10 ? "0"+ dateD : dateD);//当前时间
            //获取三十天前日期
            let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30);//最后一个数字30可改，30天的意思
            let lastY = lw.getFullYear();
            let lastM = lw.getMonth()+1;
            let lastD = lw.getDate();
            let startDate = lastY+"-"+(lastM<10 ? "0" + lastM : lastM)+"-"+(lastD<10 ? "0"+ lastD : lastD);//三十天之前日期
            if (index==1) {
                this.defaultDate = [startDate,endDate]
                this.getTuchildcomp()
                this.getSumtucargo()
            } else if (index == 2){
                let startDate1 = dateY + '-' + '01' + '-' + '01'
                this.defaultDate = [startDate1,endDate]
                this.getDataList()
            }
        },
        getDataList() {
            const _this = this
            this.throughputOptions.xAxis.data = []
            this.throughputOptions.legend.data = []
            this.throughputOptions.series[0].name = ''
            this.throughputOptions.series[0].data = []
            this.throughputOptions.series[1].name = ''
            this.throughputOptions.series[1].data = []
            this.throughputOptions.series[2].name = ''
            this.throughputOptions.series[2].data = []
            this.throughputOptions.series[3].name = ''
            this.throughputOptions.series[3].data = []
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/queryyearcomp`)
                .then((res) => {
                    // if (res.data.code != '0000') {
                    //     return this.$message.error(res.data.msg)
                    // }
                    console.log(res)
                    let data = res.data.data.echartsData
                    let dataX = ''
                    let dataCompanyList = ''
                    console.log(data.dataCompanyList)
                    dataCompanyList = data.dataCompanyList
                    dataX = data.dataX
                    if (dataCompanyList !== null && dataX !== null) {
                        this.throughputOptions.xAxis.data = data.dataX
                        console.log(data.dataCompanyList)
                        data.dataCompanyList.forEach((el, index) => {
                            if(el.companyName == '金港分公司'){
                                this.throughputOptions.legend.data.push(el.companyName.substring(0, 2))
                                this.throughputOptions.series[1].name = el.companyName.substring(0, 2)
                                this.throughputOptions.series[1].data = el.weightList
                            }else if(el.companyName == '大港分公司'){
                                this.throughputOptions.legend.data.push(el.companyName.substring(0, 2))
                                this.throughputOptions.series[0].name = el.companyName.substring(0, 2)
                                this.throughputOptions.series[0].data = el.weightList
                            }else if(el.companyName == '东港港务有限公司'){
                                this.throughputOptions.legend.data.push(el.companyName.substring(0, 2))
                                this.throughputOptions.series[2].name = el.companyName.substring(0, 2)
                                this.throughputOptions.series[2].data = el.weightList
                            }else if(el.companyName == '高新港务'){
                                this.throughputOptions.legend.data.push(el.companyName)
                                this.throughputOptions.series[3].name = el.companyName
                                this.throughputOptions.series[3].data = el.weightList
                            }
                        })
                        console.log(this.throughputOptions,'throughputOptions')
                    } else {
                        this.throughputOptions.xAxis.data = []
                        this.throughputOptions.legend.data = []
                        this.throughputOptions.series[0].name = ''
                        this.throughputOptions.series[0].data = []
                        this.throughputOptions.series[1].name = ''
                        this.throughputOptions.series[1].data = []
                        this.throughputOptions.series[2].name = ''
                        this.throughputOptions.series[2].data = []
                        this.throughputOptions.series[3].name = ''
                        this.throughputOptions.series[3].data = []
                    }
                    console.log(this.throughputOptions)
                }).catch(error =>{})
        },
        // 吞吐量-修改时间
        handleChange(value) {
            const date1 = new Date(value[0])
            const date2 = new Date(value[1])
            var day1 = date1.getDate();
            var day2 = date2.getDate();
            var cdate1 = day1 < 10 ? "0" + day1 : day1;
            var cdate2 = day2 < 10 ? "0" + day2 : day2;
            var startDate = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + cdate1
            var endDate = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + cdate2
            this.defaultDate = [startDate, endDate]
            this.getTuchildcomp()
            this.getSumtucargo()
        },
        //访问量排行
        openVisitNum() {
            this.isShow = true
        },
        //首页总量查询
        getplanSum() {
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/querysum`)
                .then((res) => {
                    // if (res.data.code != '0000') {
                    //     return this.$message.error(res.data.msg)
                    // }
                    this.plantotal = res.data.data
                    this.proDatafenzi = Number(res.data.data[1].sumVolume)
                }).catch(error =>{})
        },
        //首页实际总量查询
        getactualSum() {
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/queryRealsum`)
                .then((res) => {
                    this.actualtotal = res.data.data
                    let weight   = (Number( this.actualtotal[0].weight?this.actualtotal[0].weight:0) )
                    let weight1  = (Number( this.actualtotal[1].weight?this.actualtotal[1].weight:0))
                    let weight2  = (Number( this.actualtotal[2].weight?this.actualtotal[2].weight:0))
                    let weightA = weight.toString().replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
                    let weightB = weight1.toString().replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
                    let weightC = weight2.toString().replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
                    this.actualtotal[0].weight = weightA
                    this.actualtotal[1].weight = weightB
                    this.actualtotal[2].weight = weightC
                    this.proDatafenmu = Number(this.actualtotal[2].weight.replace(/,/g, ""))
                }).catch(error =>{})
        },
        // 首页自然吨按公司分组查询
        getSumcomp() {
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/querysumcomp`)
                .then((res) => {
                    let data = res.data.data;
                    data.forEach(el => {
                        this.naturalOptions.xAxis.data.push(el.companyName)
                        this.naturalOptions.series[0].data.push(el.weight)
                        console.log(this.naturalOptions)
                    })
                }).catch(error => {})
        },
        // 首页货物吞吐量排行查询
        getSumtucargo() {
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/querysumtucargo?startTime=`+this.defaultDate[0]+'&endTime='+this.defaultDate[1])
                .then((res) => {
                    this.sumtucargoList = res.data.data;
                    // var resultDataTemp = [{"cargoName":"VALE造球精粉","weight":"273226.38"},{"cargoName":"硫磺","weight":"36334.00"},{"cargoName":"铁矿石","weight":"25551.56"},{"cargoName":"烟煤","weight":"25310.00"},{"cargoName":"加球","weight":"13578.00"},{"cargoName":"焦煤","weight":"10000.00"},{"cargoName":"煤炭","weight":"9100.00"},{"cargoName":"煅烧焦","weight":"7050.00"},{"cargoName":"U型钢","weight":"6200.00"},{"cargoName":"MAC粉","weight":"6000.00"}];
                    // this.sumtucargoList  = this.sumtucargoList.length>0?this.sumtucargoList:resultDataTemp;
                }).catch(error =>{})
        },
        // 首页吞吐量比较
        getSumtucompare() {
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/querysumtucompare`)
                .then((res) => {

                    var resultData = res.data.data;
                     this.sumtucompare.rateDay = resultData.rateDay?resultData.rateDay:"--"
                     this.sumtucompare.rateWeek = resultData.rateWeek?resultData.rateWeek:"--"
                }).catch(error =>{})
        },
        // 分公司吞吐量
        getTuchildcomp() {
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/querytuchildcomp?startTime=`+this.defaultDate[0]+'&endTime='+this.defaultDate[1])
                .then((res) => {
                    console.log(res)
                    let data = res.data.data.echartsData
                    let dataX = ''
                    let dataCompanyList = ''
                    console.log(data.dataCompanyList)
                    dataCompanyList = data.dataCompanyList
                    dataX = data.dataX
                    if (dataCompanyList !== null && dataX !== null) {
                        this.throughputOptions.xAxis.data = data.dataX
                        console.log(data.dataCompanyList)
                        data.dataCompanyList.forEach((el, index) => {
                            if(el.companyName == '金港分公司'){
                                this.throughputOptions.legend.data.push(el.companyName.substring(0, 2))
                                this.throughputOptions.series[1].name = el.companyName.substring(0, 2)
                                this.throughputOptions.series[1].data = el.weightList
                            }else if(el.companyName == '大港分公司'){
                                this.throughputOptions.legend.data.push(el.companyName.substring(0, 2))
                                this.throughputOptions.series[0].name = el.companyName.substring(0, 2)
                                this.throughputOptions.series[0].data = el.weightList
                            }else if(el.companyName == '东港港务有限公司'){
                                this.throughputOptions.legend.data.push(el.companyName.substring(0, 2))
                                this.throughputOptions.series[2].name = el.companyName.substring(0, 2)
                                this.throughputOptions.series[2].data = el.weightList
                            }else if(el.companyName == '高新港务'){
                                this.throughputOptions.legend.data.push(el.companyName)
                                this.throughputOptions.series[3].name = el.companyName
                                this.throughputOptions.series[3].data = el.weightList
                            }
                        })
                    } else {
                        this.throughputOptions.xAxis.data = []
                        this.throughputOptions.legend.data = []
                        this.throughputOptions.series[0].name = ''
                        this.throughputOptions.series[0].data = []
                        this.throughputOptions.series[1].name = ''
                        this.throughputOptions.series[1].data = []
                        this.throughputOptions.series[2].name = ''
                        this.throughputOptions.series[2].data = []
                        this.throughputOptions.series[3].name = ''
                        this.throughputOptions.series[3].data = []
                    }
                    // var dataTemp = {"dataX":["2020-08-01","2020-08-03","2020-08-04","2020-08-05","2020-08-06","2020-08-07","2020-08-08","2020-08-09","2020-08-10","2020-08-11","2020-08-12","2020-08-13","2020-08-14","2020-08-15","2020-08-16","2020-08-17","2020-08-18","2020-08-19","2020-08-22","2020-08-24","2020-08-26","2020-08-27","2020-08-28"],"dataCompanyList":[{"companyName":"大港分公司","weightList":[0,0.2834,1,2.015,0.4,0.455,0.05,0,0,0.87,1.81,0.01,5.222638,0,0.25026,20.526152,0.38336,2.4,0,0.34,1.06,0.24,0.55]},{"companyName":"东港港务有限公司","weightList":[0,0,0,0,0,0,0,0,0,0.201,0,0,1.3578,0.2,0,0,0,0,0,0,0,0,0]},{"companyName":"金港分公司","weightList":[0,0,1,0,0,0,1,0.23,1.180156,0,0,0.22,0,0.02,0,1.1,0,0,0.12,0,0,0,0]}]};
                    // data = data.dataX?data:dataTemp;

                    console.log(this.throughputOptions)

                }).catch(error =>{})
        },
        // 在线用户
        getOnlineUser() {
            this.$http
                .get(`/${this.$ServiceName}/api/external/homepage/getOnlineUser`)
                .then((res) => {
                    this.onlineUser = res.data.data
                }).catch(error =>{})
        },
        //头部链接
        showReport(index) {
            // console.log(val)
            //吞吐量链接跳转
            // if (index == 1) {
            //     this.$router.push('/externalLink_MonthThroughput')
            //     //自然吨链接跳转
            // } else if (index == 2) {
            //     this.$router.push('/externalLink_ProductionMreport')
            //     //外贸量
            // } else if (index == 3) {
            //     this.$router.push('/externalLink_Productioncollect')

            // }
        },
        //关闭快速入口
        visibleChangeB(val){
            this.fastEntryIsShow = val
        },
        init(){
            this.getserviceListData()
            this.visibleChangeB(false)
        },
        //编辑快速入口
        editFastEntry(){
            clearTimeout(this.timer); //防止加载单击事件
            this.fastEntryIsShow = true
        },
        //获取快速入口数据
        getserviceListData(){
            this.$http.get(
                `/${this.$ServiceName}/api/external/region/listbyacc`
            ).then((res)=>{
                this.serviceList.map(item=>{
                    item.url = ""
                    item.text = ""
                })
                res.data.data.pages.map(item=>{
                    this.$set(this.serviceList[Number(item.menuIndex)],'text',item.menuName)
                    this.$set(this.serviceList[Number(item.menuIndex)],'url',item.url)
                })
            }).catch((error)=>{});
        },
        //中部链接
        goToserviceList(index) {
            clearTimeout(this.timer);          //首先要清除定时器
            this.timer = setTimeout(()=>{
                if(this.serviceList[index].url){
                    this.$store.state.app.searchResouce = 'menu'
                    this.$router.push(this.serviceList[index].url)
                }

            },300)

            // 报表  externalLink_Productionreport
            // if (index == 0) {
            //     this.$router.push('/externalLink_Productionreport')
            //     // this.$router.push({
            //     //     name: 'linkProductionreport',
            //     //     params: {
            //     //         title: this.$route.meta.title,
            //     //         link: this.$route.meta.link
            //     //     }
            //     // })
            // } else if (index == 1) {
            //     this.$router.push('/externalLink')
            //     this.$router.push({
            //         name: 'cargoForecast',
            //         params: {
            //             title: this.$route.meta.title,
            //             link: this.$route.meta.link
            //         }
            //     })
            // } else if (index == 2) {
            //     this.$router.push('/externalLink')
            //     this.$router.push({
            //         name: 'oceanlinerforecast',
            //         params: {
            //             title: this.$route.meta.title,
            //             link: this.$route.meta.link
            //         }
            //     })
            // }else
            // clearTimeout(this.timer);          //首先要清除定时器
            // this.timer = setTimeout(()=>{
            //     if (index == 3) {
            //         this.noticeShow = true
            //     }
            //     // else if (index == 5) {
            //     //     this.$router.push('/externalLink')
            //     //     this.$router.push({
            //     //         name: 'shipDispatch',
            //     //         params: {
            //     //             title: this.$route.meta.title,
            //     //             link: this.$route.meta.link
            //     //         }
            //     //     })
            //     // }
            //     else if (index == 7) {
            //         window.open('http://pps.portzj.com/#/login','_blank')
            //         // this.$router.push('/externalLink')
            //         // this.$router.push({
            //         //     name: 'linkOnlinehall',
            //         //     params: {
            //         //         title: this.$route.meta.title,
            //         //         link: this.$route.meta.link
            //         //     }
            //         // })
            //     }
            // },300)

        },
        gotoPageBusiness() {
            this.$router.push('/externalLink')
            this.$router.push({
                name: 'linkBusiness',
                params: {
                    title: 'this.$route.meta.title',
                    link: this.$route.meta.link
                }
            })
        },
        gotoPageCompany() {
            this.$router.push('/externalLink_jd')
            this.$router.push({
                name: 'linkCompany',
                params: {
                    title: this.$route.meta.title,
                    link: this.$route.meta.link
                }
            })
        },
        gotoPageGoods() {
            this.$router.push('/externalLink_jd')
            this.$router.push({
                name: 'linkGoods',
                params: {
                    title: this.$route.meta.title,
                    link: this.$route.meta.link
                }
            })
        },
        gotoPageMainbusiness() {
            this.$router.push('/externalLink_jd')
            this.$router.push({
                name: 'linkMainbusiness',
                params: {
                    title: this.$route.meta.title,
                    link: this.$route.meta.link
                }
            })
        },
        gotoPageRevenue() {
            this.$router.push('/externalLink_jd')
            this.$router.push({
                name: 'linkRevenue',
                params: {
                    title: this.$route.meta.title,
                    link: this.$route.meta.link
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
.green {
    color: #1AB667;
}

.red {
    color: #E02020;
}

div {
    box-sizing: border-box;
}

.container {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;

    .card_item {
        height: 200px;

        /deep/ .el-card__body {
            padding: 0;
        }

        .card_item_t {
            display: flex;
            padding: 10px 16px;
            justify-content: space-between;
            align-items: center;
            height: 40px;

            span {
                font-family: 'Microsoft YaHei';
                font-size: 16px;
                color: #303133;
                letter-spacing: 0;
                text-align: left;
                line-height: 20px;
            }
        }

        .card_item_m {
            padding: 0 16px;
            border-top: 1px solid #E9EDF0;
            border-bottom: 1px solid #E9EDF0;
            height: 120px;

            .number_size {
                padding: 20px 0 15px 0;
                display: flex;
                align-items: flex-end;

                .number {
                    font-family: ArialMT;
                    font-size: 28px;
                    color: #303133;
                    letter-spacing: 0;
                    text-align: left;
                    line-height: 22px;
                }

                .unit {
                    margin-left: 10px;
                    // font-family: MicrosoftYaHei;
                    font-size: 12px;
                    color: #909399;
                    letter-spacing: 0;
                    text-align: left;
                }

                .txt {
                    margin-left: 30px;
                    font-size: 14px;
                    color: #338CE8;
                    letter-spacing: 0;
                    text-align: left;
                }
            }

            .txt_number {
                padding: 20px 0;
                // height: 35px;
                font-size: 12px;
                color: #606266;
                display: flex;

                /deep/ .el-progress {
                    width: 100%;
                }

                img {
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                }

                img+img {
                    margin-left: -5px;
                }

                .day_txt {
                    width: 50%;

                    span:nth-child(2) {
                        margin-left: 5px;
                        font-family: ArialMT;
                    }
                }

                .week_txt {
                    width: 50%;

                    span:nth-child(2) {
                        margin-left: 5px;
                        font-family: ArialMT;
                    }
                }
            }
        }

        .card_item_b {
            display: flex;
            padding: 10px 16px;
            justify-content: space-between;
            align-items: center;
            height: 40px;

            .txt {
                font-size: 12px;
                color: #606266;
            }

            .num {
                font-size: 12px;
                color: #909399;
            }
        }
    }

    .service_item {
        // height: 107px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
        cursor: pointer;
        /deep/ .el-card__body {
            padding: 0;
        }

        .service_icon {
            text-align: center;
            padding-top: 25px;
        }

        .service_name {
            text-align: center;
            font-size: 14px;
            color: #606266;
            letter-spacing: 0;
            text-align: center;
            padding: 17px 0;
        }
    }

    .throughput_item {
        padding-bottom: 20px;

        /deep/ .el-card__body {
            padding: 0;
        }

        .throughput_item_t {
            border-bottom: 1px solid #E9EDF0;
            padding: 0 16px;
        }

        .title_l {
            display: flex;
            align-items: center;
            height: 50px;

            span {
                margin-left: 15px;
                font-size: 16px;
                color: #303133;
                letter-spacing: 0;
                line-height: 16px;
            }
        }

        .title_r {
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 50px;
            .item {
                margin: 0 15px;
                font-size: 14px;
                color: #606266;
                letter-spacing: 0;
                text-align: center;
                line-height: 34px;
                min-width: 30px;
            }
            .item:first-child{
                cursor: not-allowed
            }
            .active {
                color: #338CE8
            }
        }

        .throughput_item_b {
            padding: 0 16px;

            .title {
                font-size: 16px;
                color: #303133;
                letter-spacing: 0;
                line-height: 16px;
                padding: 24px 0;
            }

            li {
                display: flex;
                align-items: center;
                padding-right: 30px;

                div:nth-child(1) {
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 18px;
                    font-size: 12px;
                    color: #00003F;
                    background: #F3F3F3;
                    border: 1px solid #F0F0F0;
                }

                div:nth-child(2) {
                    margin-left: 10px;
                    font-size: 14px;
                    color: #606266;
                    letter-spacing: 0;
                    text-align: center;
                    line-height: 34px;

                }

                div:nth-child(3) {
                    flex: 1;
                    text-align: right;
                    font-size: 14px;
                    color: #909399;
                    letter-spacing: 0;
                    text-align: right;
                    line-height: 34px;
                    // margin-right: 0;
                }

                .txt.active {
                    border: 1px solid #A2E5FF;
                    background: #DCF5FF;
                    color: #006AB7;
                }
            }
        }
    }

    .el-card {
        cursor: pointer;
    }
}
</style>
